<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vue-GeoJSON</title>
    <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
      #main {
          margin: 0 0;
          width: 100%;
          height: 100vh;
      }
      #map {
          height: 100vh;
          width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <mapgis-web-map
        id="map"
        :map-style="mapStyle"
        :zoom="mapZoom"
        :center="outerCenter"
        :crs="mapCrs"
        v-on:load="handleMapLoad"
        >
        <mapgis-ogc-wmts-layer
          :layer-id="layerWmtsId"
          :source-id="sourceWmtsId"
          :base-url="wmtsurl"
          :tile-matrix-set="tileMatrixSet"
          :wmts-layer="layer"
          :format="format"
          :token="token">
        </mapgis-ogc-wmts-layer>
        <mapgis-geojson-layer
          :source="geojsonSource"
          :source-id="geojsonSourceId"
          :layer="circleLayer"
          :layer-id="circleLayerId">
        </mapgis-geojson-layer>
        <mapgis-geojson-layer
          :source="geojsonSource"
          :source-id="geojsonSourceId"
          :layer="lineLayer"
          :layer-id="lineLayerId">
        </mapgis-geojson-layer>
        <mapgis-geojson-layer
          :source="geojsonSource"
          :source-id="geojsonSourceId"
          :layer="fillLayer"
          :layer-id="fillLayerId">
        </mapgis-geojson-layer>
      </mapgis-web-map>
    </div>
    <script>
      var geojson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[114.28939819335936,30.594183452544694]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[114.34776306152344,30.623436511269382],[114.32510375976562,30.63909360759635],[114.30673599243164,30.634958017061198],[114.29180145263672,30.629640569460406],[114.28339004516601,30.627424880048103],[114.26467895507812,30.620777507443577],[114.24613952636719,30.616050209185243],[114.23566818237304,30.61073172273802]]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[114.33454513549805,30.479893814659587],[114.38587188720703,30.479893814659587],[114.38587188720703,30.504596494227247],[114.33454513549805,30.504596494227247],[114.33454513549805,30.479893814659587]]]}}]};

      new Vue({
          el: '#app',
          data() {
              return {
                  mapStyle: {
                      version: 8,
                      sources: {},
                      layers: []
                  },
                  mapZoom: 10,
                  outerCenter: [114.3, 30.5],
                  mapCrs: 'EPSG:4326',

                  layerWmtsId: 'ogcwmts_layerId',
                  sourceWmtsId: 'ogcwmts_sourceId',
                  wmtsurl: 'http://t0.tianditu.gov.cn/img_c/wmts',
                  layer:"img",
                  tileMatrixSet:"c",
                  format:"tiles",
                                          token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

                  geojsonSourceId: "geojsonCollections",
                  geojsonSource: {
                      type: 'geojson',
                      data: geojson
                  },
                  circleLayerId: 'circleid',
                  circleLayer: {
                      "type": "circle",
                      "source": "geojsonCollections", //必须和上面的geojsonCollections一致
                      "filter": ["==", "$type", "Point"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
                      "paint": {
                          "circle-radius": 15, //半径
                          "circle-color": "#FFFFFF", //颜色
                          "circle-opacity": 0.8, //透明度
                          "circle-stroke-width": 5, //轮廓线宽度
                          "circle-stroke-color": "#52B883", //轮廓线颜色
                          "circle-stroke-opacity": 0.7 //轮廓线透明度
                          //"circle-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
                      }
                  },
                  lineLayerId: 'lineid',
                  lineLayer: {
                      "type": "line",
                      "source": "geojsonCollections", //必须和上面的geojsonCollections一致
                      "filter": ["==", "$type", "LineString"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
                      "layout": {
                          "line-cap": "square", //butt 尖头，round 圆头，square平头
                          "line-join": "round", //bevel平拐，round 圆拐，miter棱拐
                          "line-miter-limit": 2, //棱拐的限制，一般用不上
                          "line-round-limit": 1.05, //圆拐的限制，一般用不上
                          "visibility": "visible", //是否可见  visible / none
                      },
                      "paint": {
                          "line-width": 10, //宽度
                          "line-color": "#52B883", //颜色
                          "line-opacity": 1.0, //透明度
                          "line-gap-width": 3, //线的沟宽，如果有一条线会变成2条线，中间有条沟
                          "line-offset": 0, //尽量少用，如果这个值相对大的话在拐角处很容易变形变胖
                          "line-dasharray": [5, 2], //实线、虚线的组合，可以表示铁路线等
                          "line-blur": 5, //模糊度，和宽度配合使用，当宽度20，模糊度10时，出现边线模糊的效果，该值要小于线宽度
                          // "line-pattern": "picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
                          //"line-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
                      }
                  },
                  fillLayerId: 'fillid',
                  fillLayer: {
                      "type": "fill",
                      "source": "geojsonCollections", //必须和上面的geojsonCollections一致
                      "filter": ["==", "$type", "Polygon"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
                      "layout": {
                          "visibility": "visible" //是否可见  visible / none
                      },
                      "paint": {
                          "fill-antialias": true, //抗锯齿，true表示针对边界缝隙进行填充
                          "fill-color": "#FFFFFF", //颜色
                          "fill-opacity": 0.8, //透明度
                          "fill-outline-color": "#52B883", //边线颜色，没错,确实没有边线宽度这个选项
                          //"fill-pattern":"picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
                          //"fill-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
                      }
                  }
              };
          },
          methods: {
              handleMapLoad(payload) {
                  this.map = payload.map;
              }
          }
      });
    </script>
  </body>
</html>
